<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../css/common/normalize.css" />
  <link rel="stylesheet" href="../css/common/reset.css" />
  <link rel="stylesheet" href="../css/diamond_detail.css" />
  <link rel="stylesheet" href="../libs/swiper/swiper-4.2.2.min.css">
  <!-- 自定义swiper分页器样式 -->
  <style>
    .my-bullet{
      width: 8px;
      height: 8px;
      display: inline-block;
      border: 1px solid #707070;
      background: transparent;
      border-radius: 100%;
      margin: 0 4px;
    }
    .swiper-pagination-bullet-active{
      border-color: #ffffff;
    }
  </style>
  <title>采矿家--宝石详情</title>
</head>
<body :class="{'overflow': filterTableShow}">
  <div class="container">
    <!-- header -->
    <header class="header">
      <div class="icon-menu" v-show="!showMenu" @click="openMenu()">
        <img src="../images/icon_menu.png" alt="">
      </div>
      <div class="icon-close" v-show="showMenu" @click="closeMenu()">
          <img src="../images/icon_close.png" alt="">
        </div>
      <div class="icon-logo">
        <img src="../images/logo.jpg" alt="">
      </div>
      <div class="icon-user">
        <a href="login.html"><img src="../images/icon_user.png" alt=""></a>
      </div>
    </header>
    <!-- 菜单分类 -->
    <div class="menu" v-show="showMenu">
      <ul>
        <li><a href="index.html">首页</a></li>
        <li class="active"><a href="diamond.html">宝石</a></li>
        <li><a href="service.html">定制服务</a></li>
        <li><a href="purchasing.html">全球猎宝</a></li>
        <li><a href="journal.html">采矿家日记</a></li>
      </ul>
    </div>

    <!-- banner -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img style="width: 100%;height:100%" src="../images/detail_banner.jpg" alt=""></div>
        <div class="swiper-slide"><img style="width: 100%;height:100%" src="../images/detail_banner.jpg" alt=""></div>
        <div class="swiper-slide"><img style="width: 100%;height:100%" src="../images/detail_banner.jpg" alt=""></div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>

    <div class="diamond-infos">
      <h2>1.15克拉天然莫桑比克鸽血红红宝石</h2>
      <div class="price">￥21500</div>
      <div class="guige">
        <span>规格</span>
      </div>
      <div class="list-item">
        <div>种类：裸石</div>
        <div>形状：得到的</div>
      </div>
      <div class="list-item">
        <div>种类：裸石</div>
        <div>形状：得到的</div>
      </div>
      <div class="list-item">
        <div>证书：国健证书</div>
      </div>
    </div>

    <div class="article-area">
      <div class="tips"><span>商品描述</span></div>
      <p>红宝石作为世界五大宝石之一，久负盛名，其价值不言而
        喻。在堪称红色宝石之王的红宝石，其中稀有的“鸽血红”
        色更是精品中的极品。它的红色除了纯净、饱和、明亮之外，
        更给人以强烈的“燃烧的火”与“流动的血”的感觉。</p>
      <img src="../images/detail_banner.jpg" alt="">
      <p>这枚经亚洲AIGS认证的天然未加热红宝石，重达1.15克
        拉，产自优质矿区莫桑比克。通体为鲜艳浓郁的鸽血红色调，
        红色纯正鲜亮，鲜艳浓烈，极富感染力。在精湛的切割工艺
        和抛磨技艺下，释放强玻璃光泽，火彩悦目，折光优异，在
        天然产出中极尽珍稀。肉眼观察微量内含物，镶嵌后基本可
        掩盖，性价比高，镶嵌佩戴举手投足间散发摄人心魂的动人
        美态。</p>
    </div>


   
  </div>
</body>
<script src="../libs/rem.js"></script>
<script src="../libs/swiper/swiper-4.2.2.min.js"></script>
<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    autoplay: true,
    loop: true,
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
      bulletClass : 'my-bullet',
      clickable :true
    }
  })        
</script>
<script src="../libs/vue.1.0.8.js"></script>
<script src="../js/diamond_detail.js"></script>
</html>